<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-03 15:18:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-03 16:24:54
-->
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>


<style>
    body table {
        margin: 0 auto;
    }

    table {
        background-image: url('./images/beijing.jpg');
    }

    table caption {
        font-family: 'Courier New', Courier, monospace;
        font-size: 30px;

    }

    table td {
        width: 100px;
        height: 100px;
    }

    img {
        margin-top: 30px;
    }
</style>
</head>

<body>
    <h1>分数:0分</h1>
    <table>
        <caption>打地鼠</caption>
        <tr>
            <td><img src="./images/keng.gif" alt=""></td>
            <td><img src="./images/keng.gif" alt=""></td>
            <td><img src="./images/keng.gif" alt=""></td>
        </tr>
        <tr>
            <td><img src="./images/keng.gif" alt=""></td>
            <td><img src="./images/keng.gif" alt=""></td>
            <td><img src="./images/keng.gif" alt=""></td>
        </tr>
        <tr>
            <td><img src="./images/keng.gif" alt="" ></td>
            <td><img src="./images/keng.gif" alt="" ></td>
            <td><img src="./images/keng.gif" alt="" ></td>
        </tr>
    </table>

    <embed src="./bgm.mp3" type="">

    <script>
        // 思路

        // 1.随机冒出老鼠 
        // 2.出来后要回去 
        // 3.出来以后点击它 点击到  切换成击中效果的图片 分数累加 


        // 知识点  
        // 随机数  math 对象
        // dom 定位元素 
        // 对属性值的修改  src  

        // 击打效果  给它一个点击  
        // 分数累加 
        // 最终的分数要放到h1标签中  

        // 获取所有的img  
        var imgs = document.getElementsByTagName('img');
        var num = 0; // 存放随机数
        var count = 0; // 总分
        setTimeout("shows()",Math.random()*500+600);
        // 老鼠出来
        function shows() {
            num = Math.floor(Math.random()*9);
            imgs[num].src = "./images/dishu.gif";
            imgs[num].style.marginTop = '0px';
            imgs[num].setAttribute("onclick","shot()");
            setTimeout("hides()",Math.random()*500+600);
        }
        // 老鼠隐藏
        function hides() {
            imgs[num].src = "./images/keng.gif";
            imgs[num].style.marginTop = '31px';
            imgs[num].removeAttribute("onclick");
            setTimeout("shows()",Math.random()*500+600);
        }
        // 打老鼠的效果
        function shot() {
            imgs[num].src = "./images/shang.gif";
            imgs[num].style.marginTop = '5px';
            imgs[num].removeAttribute("onclick");
            count += 10;
            document.querySelector('h1').innerHTML = `分数:${count}分`
        }
    </script>
</body>

</html>